//创建“外壳”组件App
import React from "react";
import './App.css'
import Header from "./components/Header";
import List from "./components/List";
import Item from "./components/Item";
import Footrt from "./components/Footer";
class App extends React.Component{
    //状态在哪里，操作状态的方法就在哪里
    state = {todos:[
            {id:'001',name:'吃饭',done:true},
            {id:'002',name:'睡觉',done:true},
            {id:'003',name:'打代码',done:false}
        ]}

    //addTodo用于添加一个todo,接收的对象是todo对象
    addTodo = (todoObj)=> {
        //获取原todos
        const {todos} = this.state
        //追加一个todo
        const newTodos = [todoObj,...todos]
        //更新状态
        this.setState({todos:newTodos})
    }

    updateTodo = (id,done)=>{
        //获取状态中的todos
        const {todos} = this.state
        //匹配处理数据
        const newTodos = todos.map((todoObj)=> {
                if (todoObj.id === id) return {...todoObj, done}
                else return todoObj
            }
        )
        this.setState({todos:newTodos})
    }
    //deleteTode用于删除一个todo
    deleteTode = (id)=> {
        //获取状态中的todos
        const {todos} = this.state
        //删除指定id的todo对象
        const newTodes = todos.filter(todoObj => {
            return todoObj.id !== id
        })
        //更新状态
        this.setState({todos: newTodes})
    }
    //用于全选
    checkAllTodo = (done)=> {
        //获取状态中的todos
        const {todos} = this.state
        const newTodos = todos.map((todoObj)=>{
            return {...todoObj,done}
        })
        this.setState({todos:newTodos})
    }
    //用于清除所有已完成的
    handleClearAllDone = ()=>{
        //获取状态中的todos
        const {todos} = this.state
        const newTodos = todos.filter((todoObj)=>{
            //return todoObj.done===false
            return !todoObj.done
        })
        this.setState({todos: newTodos})
    }
    render() {
        const {todos} = this.state
        return(
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo} deleteTode={this.deleteTode}/>
                    <Footrt todos={todos} checkAllTodo={this.checkAllTodo} handleClearAllDone={this.handleClearAllDone}/>
                </div>
            </div>
        )
    }
}
//暴露App组件
export default App


